<template>
	<view>
		<view class="tabItem" >
			<view class="card_Item">
				<!-- <view class="head_title">
					<image referrerpolicy="no-referrer" src="/static/workImg/icon@2.png"></image>
					<view class="headH1">成绩汇总</view>
				</view> -->
				<view class="scoreItem">
					<view class="title">{{ formatDate(chengji_info.createtime) }}{{ chengji_info.tname }}-{{ chengji_info.cname }}</view>
					<view class="text">作业：{{ chengji_info.name }}</view>
				</view>
				<view class="tabCard">
					<view class="title">
						<view class="text">学生姓名</view>
						<view class="text">总分</view>
						<view class="text">作业</view>
					</view>
					<view class="lists">
						<view class="li" v-for="(item, index) in chengji_user_list" :key="index">
							<view class="num">
								<text>{{ item.name }}</text>
								<image referrerpolicy="no-referrer" src="/static/workImg/icon@4.png">
								</image>
							</view>
							<view class="name name1">{{ item.full_score }}分</view>
							<view class="name name2">{{ item.score }}分</view>
						</view>
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabId:'',
				chengji_info:{},
				chengji_user_list:[]
			}
		},
		onLoad(option) {
			// console.log('tid', option)
			this.tabId = Number(option.tid)
			uni.setNavigationBarTitle({
				title: option.tname,
			});
			this.getbaogaoChengji();
		},
		methods: {
			formatDate(dateString) {
				// 创建一个Date对象
				const date = new Date(dateString);
				
				// 获取月份、日期、小时和分钟
				const month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的是0-11，所以需要+1
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				
				// 格式化日期字符串
				return `${month}月${day}日 ${hours}:${minutes}`;
			},
			getbaogaoChengji(){
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_result_summary', data).then(res => {
					console.log('作业详情-题目统计', res);
					if (res.code != 0) {
						this.chengji_info = res.data.info;
						this.chengji_user_list = res.data.user_list;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
		}
	}
</script>

<style scoped>
/* tab biaoti */
	
	.tabItem .card_Item {
		/* background: #FFFFFF;
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 50, 83, 0.05);
		border-radius: 24rpx;
		overflow: hidden; */
		/* padding-bottom: 10rpx; */
		/* margin-top: 30rpx; */
	}
	.tabItem .card_Item .head_title {
		display: flex;
		align-items: center;		
		margin: 30rpx 32rpx;
	}
	.tabItem .card_Item .head_title image {
		width: 30rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}
	.tabItem .card_Item .head_title .headH1 {
		height: 44rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		line-height: 44rpx;
		text-align: left;
	}
	.scoreItem{
		margin: 32rpx;
		background: linear-gradient(180deg, #F2F7FD 0%, #FFFFFF 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(41, 121, 255, 0.05);
		border-radius: 24rpx;
		border: 2rpx solid rgba(41, 121, 255, 1);
		opacity: 0.95;
		/* border-image: linear-gradient(44deg, rgba(41, 121, 255, 1), rgba(122, 172, 254, 1), rgba(41, 121, 255, 1)) 1 1; */
		padding: 30rpx;
	}
	.scoreItem .title{
		font-weight: 500;
		font-size: 32rpx;
		color: #222222;
	}
	.scoreItem .text{
		font-weight: 400;
		font-size: 26rpx;
		color: #727A8E;
		margin-top: 24rpx;
		
	}
	/* tabItem  xuesheng*/
	.tabItem .tabCard {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 50, 83, 0.05);
		border-radius: 24rpx;
		overflow: hidden;
		padding-bottom: 10rpx;
		margin: 30rpx;
	}
	
	.tabItem .tabCard .title {
		height: 80rpx;
		background: #7AA7FF;
		border-radius: 24rpx;
		display: flex;
		margin: 30rpx;
		
	}
	
	.tabItem .tabCard .title .text {
		display: block;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;		
	}
	.tabItem .tabCard .title .text:nth-of-type(1){width: 30%;}
	.tabItem .tabCard .title .text:nth-of-type(2){width: 50%;}
	.tabItem .tabCard .title .text:nth-of-type(3){width: 30%;}
	.tabItem .tabCard .title .text:nth-of-type(4){width: 30%;}
	.tabItem .tabCard .lists {
		margin: 0 30rpx;
	}
	.tabItem .tabCard .lists .li {
		display: flex;
		align-items: center;
		height: 80rpx;
	}
	.tabItem .tabCard .lists .li .num {
		width: 30%;
		height: 36rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #727A8E;
		line-height: 36rpx;
		text-align: left;
		margin-left: 20rpx;
	}
	
	.tabItem .tabCard .lists .li .num image {
		width: 32rpx;
		height: 26rpx;
		margin-left: 10rpx;
	}
	
	.tabItem .tabCard .lists .li .name {
		min-height: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: center;
		
	}
	.tabItem .tabCard .lists .li .name1{width: 50%;}
	.tabItem .tabCard .lists .li .name2{width: 30%;}
	/* .tabItem .tabCard .lists .li .name3{width: 30%; } */
</style>
